/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 15:20:46
 * @LastEditors: GuitarXiaohe 2205227953@qq.com
 * @LastEditTime: 2024-02-03 21:11:57
 * @FilePath: /umi/src/pages/system/menu/form.jsx
 * @Description:
 */
import React, { useState, useEffect, forwardRef } from "react";
import { handleTree } from "@/utils/ruoyi.js";
import { GetListAPI } from "@/api/system/menu.ts";
import { Form, TreeSelect, Input, Radio, Popover, InputNumber } from "antd";
import { XHselectIcon, XHicon } from "@/components/xh-components/index";

// 子组件forwardRef 防止时机不对找不到子组件的ref
const FormPage = forwardRef((props, ref) => {
  const {
    data = {
      menuType: "M",
      isAuto: "0",
      parentId: "0",
    },
    title,
  } = props;

  // 父级菜单数据
  const [menuOptions, setMenuOptions] = useState([]);

  // 表单数据
  const [formValue] = Form.useForm();
  // 监听表单数据变化 useWatch
  const menuType = Form.useWatch("menuType", formValue);
  const icon = Form.useWatch("icon", formValue);

  // 初始化数据
  const initData = () => {
    if (data.menuId) {
      formValue.setFieldsValue(data);
    } else {
      formValue.setFieldsValue({
        menuType: "M",
        isAuto: "0",
        visible: "0",
        isFrame: "1",
        ...data,
      });
    }
  };

  // 获取父级菜单数据
  const getList = async () => {
    try {
      const { data: result } = await GetListAPI();
      const menu = { menuId: "0", menuName: "主类目", children: [] };
      menu.children = handleTree(result, "menuId");
      setMenuOptions([menu]);
    } catch (err) {
      console.log(err);
    } finally {
    }
  };

  useEffect(() => {
    initData();
    getList();
  }, []);

  return (
    <>
      <Form
        form={formValue}
        ref={ref}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 10,
        }}
        initialValues={{
          remember: true,
        }}
        autoComplete="off"
      >
        <Form.Item
          label="上级菜单"
          name="parentId"
          rules={[
            {
              required: true,
              message: "请选择上级菜单",
            },
          ]}
        >
          <TreeSelect
            fieldNames={{
              label: "menuName",
              value: "menuId",
            }}
            showSearch
            allowClear
            treeData={menuOptions}
          />
        </Form.Item>

        <Form.Item
          label="菜单类型"
          name="menuType"
          rules={[
            {
              required: true,
              message: "请选择菜单类型",
            },
          ]}
        >
          <Radio.Group>
            <Radio value="M">目录</Radio>
            <Radio value="C">菜单</Radio>
            <Radio value="F">按钮</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="菜单图标" name="icon">
          <Popover
            placement="bottom"
            title="图标选择"
            content={
              <XHselectIcon
                selectedIcon={(val) => {
                  formValue.setFieldValue("icon", val.name);
                }}
              />
            }
          >
            <Input
              prefix={<XHicon icon={icon} />}
              disabled
              placeholder="请选择菜单图标"
              value={icon}
            />
          </Popover>
        </Form.Item>
        <Form.Item
          disabled={title == "查看"}
          label="菜单名称"
          name="menuName"
          rules={[
            {
              required: true,
              message: "请填写菜单名称",
            },
          ]}
        >
          <Input placeholder="请填写菜单名称" />
        </Form.Item>
        <Form.Item
          label="显示排序"
          name="orderNum"
          rules={[
            {
              required: true,
              message: "请填写显示排序",
            },
          ]}
        >
          <InputNumber />
        </Form.Item>

        <Form.Item label="是否外链" name="isFrame">
          <Radio.Group>
            <Radio value="0">是</Radio>
            <Radio value="1">否</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          label="路由地址"
          name="path"
          rules={[
            {
              required: true,
              message: "请填写路由地址",
            },
          ]}
        >
          <Input placeholder="请填写路由地址" />
        </Form.Item>

        {/* 为菜单时显示---------SAT-------------------------》 */}
        {menuType == "C" ? (
          <>
            <Form.Item
              label="组件路径"
              name="component"
              rules={[
                {
                  required: true,
                  message: "请填写组件路径",
                },
              ]}
            >
              <Input placeholder="请填写组件路径" />
            </Form.Item>

            <Form.Item
              label="权限字符"
              name="perms"
              rules={[
                {
                  required: true,
                  message: "请填写权限字符",
                },
              ]}
            >
              <Input placeholder="请填写权限字符" />
            </Form.Item>
            <Form.Item label="路由参数" name="query">
              <Input placeholder="请填写路由参数" />
            </Form.Item>

            <Form.Item label="生成按钮权限" name="isAuto">
              <Radio.Group>
                <Radio value="0">生成</Radio>
                <Radio value="1">不生成</Radio>
              </Radio.Group>
            </Form.Item>
          </>
        ) : (
          ""
        )}

        {/* 为菜单时显示---------END-------------------------》 */}

        <Form.Item label="显示状态" name="visible">
          <Radio.Group>
            <Radio value="0">显示</Radio>
            <Radio value="1">隐藏</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="菜单状态" name="visible">
          <Radio.Group>
            <Radio value="0">正常</Radio>
            <Radio value="1">停用</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </>
  );
});
export default FormPage;
